<template>
  <view class="login-container">
    <view class="login-box">
      <view class="login-header">
        <text class="title">欢迎登录</text>
        <text class="subtitle">请使用您的账号密码登录</text>
      </view>
      
      <uni-forms :model="formState" ref="form" class="login-form">
        <uni-forms-item name="username" required>
          <uni-easyinput
            v-model="formState.username"
            placeholder="请输入用户名"
            class="input-item"
          />
        </uni-forms-item>
        
        <uni-forms-item name="password" required>
          <uni-easyinput
            v-model="formState.password"
            type="password"
            placeholder="请输入密码"
            class="input-item"
          />
        </uni-forms-item>

        <view class="btn-group">
          <button class="submit-btn" type="primary" @click="onFinish">登 录</button>
        </view>

        <view class="extra-links">
          <text class="link-text" @click="toRegister">忘记密码</text>
          <text class="divider">|</text>
          <text class="link-text" @click="toRegister">立即注册</text>
        </view>
      </uni-forms>
    </view>
  </view>
</template>

<script setup >
import { reactive } from 'vue'
import user from '@/api/user'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const formState = reactive({
  username: '',
  password: '',
})

const toRegister = () => {
  uni.navigateTo({ url: '/pages/index/register' });
}

const onFinish = async() => {
  try {
    const res = await user.login(formState.username, formState.password);
    if (res.data.code===100200) {
      userStore.setToken(res.data.data)
      // 等待获取用户信息完成
      const userInfoRes = await userStore.getUserInfo()
      console.log(userInfoRes);
      if (userInfoRes.code === 100200) {
        uni.showToast({ title: '登录成功！', icon: 'success' });
        uni.navigateTo({ url: '/pages/home/home' });
      } else {
        uni.showToast({ title: '获取用户信息失败', icon: 'none' });
      }
    } else {
      uni.showToast({ title: res.data.message || '登录失败', icon: 'none' });
    }
  } catch (error) {
    console.error(error);
    uni.showToast({ title: '登录失败，请检查网络连接', icon: 'none' });
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  padding: 20px;
}

.login-box {
  width: 90%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 30px 20px;
  box-shadow: 0 8px 32px rgba(253, 160, 133, 0.3);
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 28px;
  color: #333;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
}

.subtitle {
  font-size: 14px;
  color: #666;
  display: block;
}

.login-form {
  margin-top: 20px;
}

.input-item {
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
}

.btn-group {
  margin-top: 30px;
  padding: 0 15px;
}

.submit-btn {
  width: 100%;
  height: 45px;
  line-height: 45px;
  background: linear-gradient(120deg, #f6d365, #fda085);
  border-radius: 25px;
  font-size: 16px;
  color: #fff;
  border: none;
}

.submit-btn:active {
  opacity: 0.8;
}

.extra-links {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
}

.link-text {
  color: #fda085;
  padding: 0 10px;
}

.divider {
  color: #ddd;
}
</style> 